<template>
  <el-container>
    <el-header>
      <AdminHeader />
    </el-header>
    <el-container>
      <el-aside>
        <AdminAside />
      </el-aside>
      <el-main style="margin: 0 auto;">
  <el-table :data="userInfo" style="width: 100%;font-size: 16px;">
    <el-table-column label="用户id" width="250px">
      <template slot-scope="scope">
       
        <span style="margin-left: 10px">{{ scope.row.uid }}</span>
      </template>
    </el-table-column>

    <el-table-column label="用户名" width="250px">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.uname }}</span>
      </template>
    </el-table-column>

    <el-table-column label="账号状态" width="250px">
      <template slot-scope="scope">
        <span style="margin-left: 6px">{{ scope.row.status== "active" ? "正常" : "已冻结" }} </span>
      </template>
    </el-table-column>

    <el-table-column label="角色" width="250px">
      <template slot-scope="scope">
        <span style="margin-left: 0px">{{ scope.row.role }}</span>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="freezeAccount(scope.row.uid)"
          >冻结</el-button
        >
        <el-button
          size="mini"
          type="success"
          @click="UnblockAccount(scope.row.uid)"
          >恢复</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</el-main>
</el-container>
</el-container>
</template>

<script>
import AdminAside from '@/components/AdminAside.vue';
import AdminHeader from '@/components/AdminHeader.vue';
import { mapState } from "vuex";
export default {
  data() {
    return {
      userInfo: [
        {
          uid: "",
          uname: "",
          status: "",
          role: "",
        },
      ],
    };
  },
  components: {
    AdminAside,
    AdminHeader
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    getUserInfo() {
      this.axios
        .get(`http://localhost:3000/aManger/getUsers`)
        .then((res) => {
          this.userInfo = res.data.data;
          this.userInfo.forEach((item) => {
            this.uid = item.uid;
            this.uname = item.uname;
            this.status = item.status;
            // console.log(this.status);
            this.role = item.role;
          });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    freezeAccount(uid) {
      this.axios
        .put(`http://localhost:3000/aManger/freezeAccount`, {
          uid: uid,
        })
        .then((res) => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            alert("冻结成功");
            this.getUserInfo();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    UnblockAccount(uid) {
      this.axios
        .put(`http://localhost:3000/aManger/recoverAccount`, {
          uid: uid,
        })
        .then((res) => {
          if (res.data.code == 200) {
            alert("账号已恢复");
            this.getUserInfo();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style scoped>
.el-header {
  padding: 0;
}

.el-aside {
  color: #000000;
  text-align: center;
  height: 880px;
}

</style>
